import React, { Component } from 'react'
import { Text, View, Image, Button, Animated } from 'react-native'
import { linear } from 'react-native/Libraries/Animated/Easing'
import Slider from '@react-native-community/slider'
import AntDesign from "react-native-vector-icons/AntDesign"
import Entypo from 'react-native-vector-icons/Entypo'
import Video from 'react-native-video'
import Header from './Header'
//音乐和图像的部分，可以根据情况进行更换

let url = "http://81.70.7.43:3000/songs"

export default class Play extends Component {
    state = {
        musics: [], mIndex: 0, paused: true, duration: 0, currentTime: 0,
        rotate: new Animated.Value(0)
    }
    componentDidMount() {
        this.props.navigation.addListener('focus', () => {
            this.setState({ mIndex: this.props.route.params?.index })
        })
        fetch(url).then(resp => resp.json())
            .then(musics => this.setState({ musics }))
    }

    _playOrPause = () => {
        let an = Animated.loop(Animated
            .timing(this.state.rotate, { toValue: 360, duration: 5000, easing: linear, useNativeDriver: true })
        )
        if (this.state.paused) {
            an.start()
        } else {
            an.stop()
        }
        this.setState(state => ({ paused: !state.paused }))
    }
    _seek = m => {
        this.player.seek(m)
    }
    _back = () => {
        let len = this.state.musics.length
        if (this.state.mIndex === 0) {
            this.setState(state => ({ mIndex: state.mIndex + len }))
        }
        this.setState(state => ({ mIndex: --state.mIndex % len }))
    }
    _forward = () => {
        let len = this.state.musics.length
        this.setState(state => ({ mIndex: ++state.mIndex % len }))
    }
    _end = () => {
        let len = this.state.musics.length
        this.setState(state => ({ mIndex: ++state.mIndex % len }))
    }
    _like = () => {
        let music = this.state.musics[this.state.mIndex]
        music.like = !music.like
        console.log(music)
        fetch(url + "/" + music.id, { method: "PUT", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(music) })
            .then(resp => resp.json()).
            then(music => {
                fetch(url).then(resp => resp.json())
                    .then(musics => this.setState({ musics }))
            }
            )
    }
    render() {
        let { musics, mIndex } = this.state

        let style = {
            transform: [{
                rotate: this.state.rotate.interpolate({
                    inputRange: [0, 360], outputRange: ['0deg', '360deg']
                })
            }]
        }

        return (
            <View>
                <View>
                    <Header />
                </View>

                <View style={{ alignItems: 'center' }}>
                    <Text style={{ width: 360, fontSize: 40, margin: 10 }}>{this.state.musics[this.state.mIndex]?.name}
                    </Text>
                    <Video ref={ref => this.player = ref} paused={this.state.paused}
                        onEnd={this._end}
                        onLoad={({ duration }) => this.setState({ duration })}
                        onProgress={({ currentTime }) => this.setState({ currentTime })}
                        source={{ uri: "http://81.70.7.43/songs/" + musics[mIndex]?.name + ".mp3" }} />
                    <Animated.Image style={[{ width: 300, height: 300, borderRadius: 300, margin: 10 }, style]}
                        source={{ uri: "http://81.70.7.43/img/" + musics[mIndex]?.name + ".jpg" }} />
                    <View>
                        <AntDesign name={musics[mIndex]?.like ? "heart" : "hearto"} size={50} color={"red"} onPress={this._like} />
                    </View>
                    <View style={{ margin: 20, width: 300, flexDirection: 'row', justifyContent: 'space-around' }}>
                        <Button title={"上一首"} onPress={this._back} />
                        <Button title={this.state.paused ? "播放" : "暂停"} onPress={this._playOrPause} />
                        <Button title={"下一首"} onPress={this._forward} />
                    </View>

                    <Slider style={{ margin: 20, width: 350 }} onSlidingComplete={this._seek} maximumValue={this.state.duration}
                        value={this.state.currentTime} />

                </View>
            </View>

        )
    }
}